<template>
  <div class="vpt-base-pagination-warpper" :style="pageStyle">
    <icon-caret-left @click="onChange('prev')" />
    <div class="vpt-page-current">
      {{ currentCache }}
    </div>
    <div class="vpt-page-splite">/</div>
    <div class="vpt-page-total">
      {{ pageTotal }}
    </div>
    <icon-caret-right @click="onChange('next')" />
  </div>
</template>
<script setup>
//分页组件
import { computed } from "vue";

const props = defineProps({
  pageTotal: {
    type: Number,
    default: () => {
    },
  },
  pageIndex: {
    type: Number,
    default: () => {
      return 1;
    },
  },
  pageStyle: {
    type: Object,
    default: () => {
      return {
         paddingTop: "0.3rem"
      };
    },
  }
});

const currentCache = computed(() => {
  return props.pageIndex;
});

const emit = defineEmits(["onChangePage"]);

const onChange = (type) => {
  if (type == "next") {
    if (props.pageIndex + 1 > props.pageTotal) {
      return;
    } else {
      emit("onChangePage", props.pageIndex + 1);
    }
  }

  if (type === "prev") {
    if (props.pageIndex - 1 < 1) {
      return;
    } else {
      emit("onChangePage", props.pageIndex - 1);
    }
  }
};
</script>

<style lang="less" scoped>
.vpt-base-pagination-warpper {
  padding-top: 0.3rem;
  position: relative;
  display: flex;
  justify-content: flex-end;
  color: #fff;
  font-size: 0.14rem;
  text-shadow: 0 2px 7px #006aff;
  font-weight: 500;
  svg {
    cursor: pointer;
    margin-right: 0.2rem;
    margin-left: 0.2rem;
  }
}
</style>
